<#include '../header.ftl'>
<#include '../showresult/header.ftl'>

    <style>
        /*------公共样式开始------*/
        .layui-input {
            max-width: 300px;
        }
        /*------公共样式结束------*/

        /*------小屏幕设备开始------*/
        @media (max-width: 767px) {
        }
        /*------小屏幕设备结束------*/

        /*------中大型屏幕设备开始------*/
        @media (min-width: 768px) {
        }
        /*------中大型屏幕设备结束------*/
    </style>

    <main style="max-width: ${maxWidth}px;margin: 0 auto;padding-top: 1%">
        <form class="layui-form" action="">
            <div class="layui-form-item">
                <label class="layui-form-label">头像</label>
                <div class="layui-input-block">
                    <img class="layui-circle layui-anim" src="${Request.user.avatarPath!"/images/logo.png"}"
                    alt="logo" width="50" id="uploadLogo">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">您的ID</label>
                <div class="layui-input-block">
                    <input type="text" name="id" class="layui-input layui-disabled" value="${Request.user.id!}" disabled/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" name="username" class="layui-input" value="${Request.user.username!}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码</label>
                <div class="layui-input-block">
                    <input type="password" name="password" class="layui-input" autocomplete = "off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">确认密码</label>
                <div class="layui-input-block">
                    <input type="password" name="checkPassword" class="layui-input" autocomplete = "off"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">真实姓名</label>
                <div class="layui-input-block">
                    <input type="text" name="realName" class="layui-input" value="${Request.user.realName!}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="SEX_MAN" title="男" ${(Request.user.sex == 'SEX_MAN')?string('checked','')} >
                    <input type="radio" name="sex" value="SEX_WOMAN" title="女" ${(Request.user.sex == 'SEX_WOMAN')?string('checked','')}>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="width: auto">邮箱</label>
                <div class="layui-input-block">
                    <input type="email" class="layui-input layui-disabled" style="display: inline" value="${Request.user.email!}" disabled/>
                    <#if Request.user.emailFlag ?? && Request.user.emailFlag == "IS_ACTIVATION">
                        <span class="layui-badge layui-bg-green layui-inline">已激活</span>
                    <#else>
                        <span class="layui-badge layui-inline">未激活</span>
                    </#if>
                    <button type="button" id="resetEmail" class="layui-btn layui-btn-sm">重新绑定</button>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </main>
<script>
    //Demo
    layui.use(['form', 'upload', 'layer'], function(){
        var form = layui.form
            , upload = layui.upload
            , layer = layui.layer;

        $('#resetEmail').click({
            title: '请输入新邮箱'
        }, function () {
            layer.prompt(function(value, index, elem){
                if (isEmail(value)) {
                    const loadIndex = layer.load()
                    $.post('/email/change', {"email": value}, function (data) {
                        layer.close(loadIndex)
                        if (data.success) {
                            $('input[type="email"]').val(value)
                            layer.close(index);
                            layer.msg(data.payload)
                        } else {
                            layer.alert(data.msg)
                        }
                    })
                } else {
                    layer.msg('请输入邮箱', {time: 1000})
                    $(elem).focus().select()
                }
            });
        })

        $('#uploadLogo').click(function () {
            layer.open({
                type: 2,
                title: '裁切头像',
                content: '/test',
                area: ['90%', '90%'],
                success: function(layero, index){
                    var body = layer.getChildFrame('body', index);
                    var w = $(layero).find("iframe")[0].contentWindow;
                    w.myCropper({aspectRatio: 1}, null, $('#uploadLogo'))
                    let find = body.find("#check");
                    $(find).on('click', function () {
                        layer.confirm('确定修改吗?', {icon: 3, title:'确定修改头像'}, function(index){
                            layer.load()
                            let message = new FormData();
                            let id = $('input[name="id"]').val()
                            let file = dataURLToFile($('#uploadLogo')[0].src, new Date().getTime());
                            message.append("id", id);
                            message.append("file", file);

                            $.ajax({
                                url: '/user/logo',
                                type: 'post',
                                contentType: false,
                                processData: false,
                                dataType: "json",
                                data: message,
                                success: function (data) {
                                    layer.close(layer.index)
                                    if (data.success) {
                                        layer.closeAll()
                                        layer.msg("修改成功！");
                                    } else {
                                        layer.msg("修改失败！请重试！");
                                    }
                                },
                                error: function (data) {
                                    layer.msg("添加失败！请重试！");
                                }
                            })
                        });
                    })
                }
            })
        })

        form.render();
        //监听提交
        form.on('submit(formDemo)', function(data){
            if (data.field.password !== undefined) {
                if (data.field.password !== data.field.checkPassword) {
                    layer.msg('俩次密码不一致！');
                    $('input[name="checkPassword"]').focus()
                    return ;
                }
            }
            layer.load()

            $.post('/user/update', data.field, function (data) {
                if (data.success) {
                    layer.close(layer.index)
                    layer.msg('更新成功！');
                    $('input[name=username]').val(data.payload.username)
                    $('input[name=realName]').val(data.payload.realName)
                    if (data.payload.sex === '男') {
                        $('input[name="sex"][value="SEX_MAN"]').attr('checked', true)
                        $('input[name="sex"][value="SEX_WOMAN"]').attr('checked', false)
                    } else {
                        $('input[name="sex"][value="SEX_MAN"]').attr('checked', false)
                        $('input[name="sex"][value="SEX_WOMAN"]').attr('checked', true)
                    }
                } else {
                    layer.msg(data.msg)
                }
            })
            return false;
        });

        function isEmail(str){
            var re=/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
            if (re.test(str) != true) {
                return false;
            }else{
                return true;
            }
        }

        //将base64转换为blob
        function dataURLToFile(dataUrl, fileName) {
            let arr = dataUrl.split(','),
                mime = arr[0].match(/:(.*?);/)[1],
                bstr = atob(arr[1]),
                n = bstr.length, u8arr = new Uint8Array(n);
            while (n--) {
                u8arr[n] = bstr.charCodeAt(n);
            }
            return new File([u8arr], fileName, {type: mime});
        }
    });
</script>

<#include '../footer.ftl'>